<template>
  <div class="panel" style="width: 100%;">
    <Title title="当月单量统计"></Title>
    <div class="chart_container" style="width: 100%; height: calc(100% - 30px)">
      <div id="dydltj" class="echart"></div>
    </div>
  </div>
</template>

<script>
  import api from '@/utils/api.js'
  import Title from './Title'
  export default {
    components: {
      Title
    },
    data() {
      return {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        myChart: null,
        option: {
          grid: {
            // left: "11.8%",
            left: '6%',
            top: "10.5%",
            bottom: "13.85%",
            right: '3%',
          },
          legend: {
            data: ['下单数'],
            itemWidth: 8,
            itemHeight: 8,
            top: "5.77%",
            right: "5.535%",
            textStyle: {
              color: "#666",
              fontSize: 14,
              fontFamily: "Alibaba PuHuiTi",
            },
            itemStyle: {},
          },
          tooltip: {
            show: true,
            trigger: "axis",
          },
          xAxis: [
            {
              type: "category",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
              },
              splitArea: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
            },
          ],
          yAxis: [
            {
              type: "value",
              nameTextStyle: {
                color: "#00FFFF",
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                  color: "rgba(238,238,238,1)",
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#666",
                fontSize: 14,
                fontFamily: "Alibaba PuHuiTi",
              },
            },
          ],
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
              symbolSize: 6,
              symbol: "circle",
              lineStyle: {
                normal: {
                  width: 2,
                  color: 'rgba(57,197,99,1)', // 线条颜色
                },
              },
              itemStyle: {
                normal: {
                  color: 'rgba(57,197,99,1)',
                  borderColor: "#fff",
                  borderWidth: 1,
                },
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  opacity: 0.2,
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(57,197,99,1)',
                      },
                      {
                        offset: 1,
                        color: "transparent",
                      },
                    ],
                    false
                  ),
                },
              },
            }
          ]
        }
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.initEcharts()
        this.setInitOptions()
        this.getRemoteData()
      })
      this.screenAdapt();
    },
    methods: {
      screenAdapt() {
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },
      initEcharts() {
        this.echarts = this.$echarts.init(document.getElementById('dydltj'), null, {devicePixelRatio: 2.5})
      },
      setInitOptions() {
        this.echarts.setOption(this.option)
      },
      getRemoteData() {
        let params = {
          year: this.year,
          month: this.month
        }
        api.orderCount(params).then(res => {
          this.option.series[0].data = res.data.map(item => item.num)
          this.echarts.setOption(this.option)
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  .mb-10 {
    margin-bottom: 10px;
  }
  .section {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    flex: 1;
    // height: 26%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 4px 0px rgba(56, 76, 99, 0.2);
    // background-color: red;

    .chart-dom {
      height: 100%;
    }

    .unit {
      position: absolute;
      left: 3.7%;
      top: 3.8%;
      font-size: 14px;
      font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
      color: #666666;
      line-height: 24px;
    }
  }
</style>
